<template>
  <!-- 有效传输率 -->
  <view class="conter">
    <cc-goback title='有效传输率' color="#fff"></cc-goback>
    <view class="navigation_head"></view>
    <view class="header">
      <view class="head">
        <view class="head_word">
          <ms-dropdown-menu>
            <ms-dropdown-item @input="mileage" v-model="value" :list="All_enterpriseList"></ms-dropdown-item>
          </ms-dropdown-menu>
        </view>
      </view>
      <view class="head">
        <view class="head_word" v-if="equipmentList.length!==0">
          <ms-dropdown-menu>
            <ms-dropdown-item @input="mileage_a" v-model="value_a" :list="equipmentList"></ms-dropdown-item>
          </ms-dropdown-menu>
        </view>
        <view class="head_if" v-else>
          请先选择企业
        </view>
      </view>
    </view>
    <view class="header_a">
      <view class="box">
        <view class="head_left">
          <uni-datetime-picker type="date" :value="date" start="2020-6-15" end="2025-6-15" @change="dateChange">
          </uni-datetime-picker>
        </view>
        <view class="head_right">
          <image src="../../static/data_analysis/rili.png" mode=""></image>
        </view>
      </view>
      <view class="Line">
      </view>
      <view class="box_a">
        <view class="head_left">
          <uni-datetime-picker type="date" :value="date" start="2020-6-15" end="2025-6-15" @change="dateChange_a">
          </uni-datetime-picker>
        </view>
        <view class="head_right">
          <image src="../../static/data_analysis/rili.png" mode=""></image>
        </view>
      </view>
    </view>
    <view class="btn" @click="dataList">
      查询数据
    </view>
    <!-- 图表 -->
    <!-- <view class="chart" v-for="(item,i) in chartList.transferRate" :key='i'>
      <view class="region">
        <echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts>
      </view>
      <view class="chart_list">

        <uni-table border stripe>
          <uni-tr>
            <uni-td width="50%" align="center">应采集（条）</uni-td>
            <uni-td width="50%" align="center">{{item.total}}</uni-td>
          </uni-tr>
          <uni-tr>
            <uni-td align="center">成功数（条）</uni-td>
            <uni-td align="center">{{item.success}}</uni-td>
          </uni-tr>
          <uni-tr>
            <uni-td align="center">有效传输率</uni-td>
            <uni-td align="center">{{item.transferRate}}%</uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view> -->
   <view v-if="chartList.transferRate">
     <view class="chart" v-if="chartList.transferRate[0]">
       <view class="region">
         <echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts>
       </view>
       <view class="chart_list">
         <!-- 表格 -->
         <uni-table border stripe>
           <uni-tr>
             <uni-td width="50%" align="center">应采集（条）</uni-td>
             <uni-td width="50%" align="center">{{chartList.transferRate[0].total}}</uni-td>
           </uni-tr>
           <uni-tr>
             <uni-td align="center">成功数（条）</uni-td>
             <uni-td align="center">{{chartList.transferRate[0].success}}</uni-td>
           </uni-tr>
           <uni-tr>
             <uni-td align="center">有效传输率</uni-td>
             <uni-td align="center">{{chartList.transferRate[0].transferRate}}%</uni-td>
           </uni-tr>
         </uni-table>
       </view>
     </view>
     <view class="chart" v-if="chartList.transferRate[1]">
       <view class="region">
         <echarts :option="option1" style="height: 300px;" @click="echartsClick"></echarts>
       </view>
       <view class="chart_list">
         <!-- 表格 -->
         <uni-table border stripe>
           <uni-tr>
             <uni-td width="50%" align="center">应采集（条）</uni-td>
             <uni-td width="50%" align="center">{{chartList.transferRate[1].total}}</uni-td>
           </uni-tr>
           <uni-tr>
             <uni-td align="center">成功数（条）</uni-td>
             <uni-td align="center">{{chartList.transferRate[1].success}}</uni-td>
           </uni-tr>
           <uni-tr>
             <uni-td align="center">有效传输率</uni-td>
             <uni-td align="center">{{chartList.transferRate[1].transferRate}}%</uni-td>
           </uni-tr>
         </uni-table>
       </view>
     </view>
     <view class="chart" v-if="chartList.transferRate[2]">
       <view class="region">
         <echarts :option="option2" style="height: 300px;" @click="echartsClick"></echarts>
       </view>
       <view class="chart_list">
         <!-- 表格 -->
         <uni-table border stripe>
           <uni-tr>
             <uni-td width="50%" align="center">应采集（条）</uni-td>
             <uni-td width="50%" align="center">{{chartList.transferRate[2].total}}</uni-td>
           </uni-tr>
           <uni-tr>
             <uni-td align="center">成功数（条）</uni-td>
             <uni-td align="center">{{chartList.transferRate[2].success}}</uni-td>
           </uni-tr>
           <uni-tr>
             <uni-td align="center">有效传输率</uni-td>
             <uni-td align="center">{{chartList.transferRate[2].transferRate}}%</uni-td>
           </uni-tr>
         </uni-table>
       </view>
     </view>
     <view class="chart" v-if="chartList.transferRate[3]">
       <view class="region">
         <echarts :option="option3" style="height: 300px;" @click="echartsClick"></echarts>
       </view>
       <view class="chart_list">
         <!-- 表格 -->
         <uni-table border stripe>
           <uni-tr>
             <uni-td width="50%" align="center">应采集（条）</uni-td>
             <uni-td width="50%" align="center">{{chartList.transferRate[3].total}}</uni-td>
           </uni-tr>
           <uni-tr>
             <uni-td align="center">成功数（条）</uni-td>
             <uni-td align="center">{{chartList.transferRate[3].success}}</uni-td>
           </uni-tr>
           <uni-tr>
             <uni-td align="center">有效传输率</uni-td>
             <uni-td align="center">{{chartList.transferRate[3].transferRate}}%</uni-td>
           </uni-tr>
         </uni-table>
       </view>
     </view>
     <view class="chart" v-if="chartList.transferRate[4]">
       <view class="region">
         <echarts :option="option4" style="height: 300px;" @click="echartsClick"></echarts>
       </view>
       <view class="chart_list">
         <!-- 表格 -->
         <uni-table border stripe>
           <uni-tr>
             <uni-td width="50%" align="center">应采集（条）</uni-td>
             <uni-td width="50%" align="center">{{chartList.transferRate[4].total}}</uni-td>
           </uni-tr>
           <uni-tr>
             <uni-td align="center">成功数（条）</uni-td>
             <uni-td align="center">{{chartList.transferRate[4].success}}</uni-td>
           </uni-tr>
           <uni-tr>
             <uni-td align="center">有效传输率</uni-td>
             <uni-td align="center">{{chartList.transferRate[4].transferRate}}%</uni-td>
           </uni-tr>
         </uni-table>
       </view>
     </view>
     <view class="chart" v-if="chartList.transferRate[5]">
       <view class="region">
         <echarts :option="option5" style="height: 300px;" @click="echartsClick"></echarts>
       </view>
       <view class="chart_list">
         <!-- 表格 -->
         <uni-table border stripe>
           <uni-tr>
             <uni-td width="50%" align="center">应采集（条）</uni-td>
             <uni-td width="50%" align="center">{{chartList.transferRate[5].total}}</uni-td>
           </uni-tr>
           <uni-tr>
             <uni-td align="center">成功数（条）</uni-td>
             <uni-td align="center">{{chartList.transferRate[5].success}}</uni-td>
           </uni-tr>
           <uni-tr>
             <uni-td align="center">有效传输率</uni-td>
             <uni-td align="center">{{chartList.transferRate[5].transferRate}}%</uni-td>
           </uni-tr>
         </uni-table>
       </view>
     </view>
     <view class="chart" v-if="chartList.transferRate[6]">
       <view class="region">
         <echarts :option="option6" style="height: 300px;" @click="echartsClick"></echarts>
       </view>
       <view class="chart_list">
         <!-- 表格 -->
         <uni-table border stripe>
           <uni-tr>
             <uni-td width="50%" align="center">应采集（条）</uni-td>
             <uni-td width="50%" align="center">{{chartList.transferRate[6].total}}</uni-td>
           </uni-tr>
           <uni-tr>
             <uni-td align="center">成功数（条）</uni-td>
             <uni-td align="center">{{chartList.transferRate[6].success}}</uni-td>
           </uni-tr>
           <uni-tr>
             <uni-td align="center">有效传输率</uni-td>
             <uni-td align="center">{{chartList.transferRate[6].transferRate}}%</uni-td>
           </uni-tr>
         </uni-table>
       </view>
     </view>
   </view>
    
  </view>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue';
  import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
  import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
  export default {
    components: {
      echarts,
      msDropdownMenu,
      msDropdownItem
    },
    data() {
      return {
        value: 0,
        value_a: 0,
        date: '',
        startTime: '',
        endTime: '',
        chartList: '',
        // 企业列表
        All_enterpriseList: [],
        // 设备列表
        equipmentList: [],
        // 企业id
        enterprise_id: '',
        // 设备id
        equipment_id: '',
        // 排口TOVC
        listOption: [],
        option:{
          title: {
            text: '排口TOVC',
            left: 'left'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'right',
            top: 'center'
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [{
                value: 10,
                name: '应采集'
              },
              {
                value: 90,
                name: '成功数量'
              },
        
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },
        option1:{
          title: {
            text: '排口TOVC',
            left: 'left'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'right',
            top: 'center'
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [{
                value: 10,
                name: '应采集'
              },
              {
                value: 90,
                name: '成功数量'
              },
        
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },
        option2:{
          title: {
            text: '排口TOVC',
            left: 'left'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'right',
            top: 'center'
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [{
                value: 10,
                name: '应采集'
              },
              {
                value: 90,
                name: '成功数量'
              },
        
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },
        option3:{
          title: {
            text: '排口TOVC',
            left: 'left'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'right',
            top: 'center'
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [{
                value: 10,
                name: '应采集'
              },
              {
                value: 90,
                name: '成功数量'
              },
        
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },
        option4:{
          title: {
            text: '排口TOVC',
            left: 'left'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'right',
            top: 'center'
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [{
                value: 10,
                name: '应采集'
              },
              {
                value: 90,
                name: '成功数量'
              },
        
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },
        option5:{
          title: {
            text: '排口TOVC',
            left: 'left'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'right',
            top: 'center'
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [{
                value: 10,
                name: '应采集'
              },
              {
                value: 90,
                name: '成功数量'
              },
        
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },
        option6:{
          title: {
            text: '排口TOVC',
            left: 'left'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'right',
            top: 'center'
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [{
                value: 10,
                name: '应采集'
              },
              {
                value: 90,
                name: '成功数量'
              },
        
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },
      }
    },
    onLoad() {
      this.getAll_enterprise()
      // this.addOption()
    },
    methods: {
      addOption() {
        var option = {
          title: {
            text: '排口TOVC',
            left: 'left'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'right',
            top: 'center'
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [{
                value: 10,
                name: '搜索引擎'
              },
              {
                value: 90,
                name: '直接访问'
              },

            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
        this.chartList.transferRate.forEach((item, index) => {
          console.log('item',item)
        })
        this.listOption.push(option)
        // console.log('this.listOption', this.listOption)
      },
      // 查询企业的总数和企业检测详情
      getAll_enterprise() {
        this.$http.get('/device/group/customerId', {}).then(res => {
          // console.log('res', res)
          if (res.code == '00000') {
            const list = []
            res.data.forEach((item, index) => {
              list.push({
                text: item.abbreviation,
                id: item.id,
                value: index + 1
              })
            })
            list.unshift({
              text: '选择企业',
              value: 0
            })
            // console.log('list', list)
            this.All_enterpriseList = list
          }
        })
      },
      // 获取设备名和id
      getequipment() {
        this.$http.get('/device/group/equipment/info/by/group/' + this.enterprise_id, {}).then(res => {
          console.log(res)
          if (res.code == '00000') {
            let list = []
            res.data.equipmentInfos.forEach((item, index) => {
              list.push({
                text: item.name,
                id: item.id,
                value: index + 1
              })
            })
            list.unshift({
              text: '选择设备',
              value: 0
            })
            this.equipmentList = list
            // console.log('this.equipmentList', this.equipmentList)
          }
        })
      },
      // 获取有效传输率列表
      getTransmission_rate() {
        this.$http.get('/envirnment-basic/transferRate/index', {
          dateRange: this.startTime + ',' + this.endTime,
          enterpriseId: this.enterprise_id,
          equId: this.equipment_id
        }).then(res => {
          console.log(res)
          if (res.code == '00000') {
            this.chartList = res.data
             const echartsList = [] 
             res.data.transferRate.forEach((item,index)=>{
               if(index==0){
                 this.option.title.text = item.indexName
                 this.option.series[0].data[0].value = item.total 
                 this.option.series[0].data[1].value = item.success
               }if(index==1){
                 this.option1.title.text = item.indexName
                 this.option1.series[0].data[0].value = item.total 
                 this.option1.series[0].data[1].value = item.success
               }if(index==2){
                 this.option2.title.text = item.indexName
                 this.option2.series[0].data[0].value = item.total 
                 this.option2.series[0].data[1].value = item.success
               }if(index==3){
                 this.option3.title.text = item.indexName
                 this.option3.series[0].data[0].value = item.total 
                 this.option3.series[0].data[1].value = item.success
               }if(index==4){
                 this.option4.title.text = item.indexName
                 this.option4.series[0].data[0].value = item.total 
                 this.option4.series[0].data[1].value = item.success
               }if(index==5){
                 this.option5.title.text = item.indexName
                 this.option5.series[0].data[0].value = item.total 
                 this.option5.series[0].data[1].value = item.success
               }if(index==6){
                 this.option6.title.text = item.indexName
                 this.option6.series[0].data[0].value = item.total 
                 this.option6.series[0].data[1].value = item.success
               }
             })
          }
        })
      },
      // 查询按钮
      dataList() {
        this.getTransmission_rate()
      },
      // 企业
      mileage(e) {
        this.enterprise_id = e.id
        // console.log('enterprise_id',this.enterprise_id);
        this.getequipment()
      },
      // 设备
      mileage_a(e) {
        this.equipment_id = e.id
        console.log('enterprise_id', this.enterprise_id);
      },
      dateChange(e) {
        this.startTime = e
        // console.log('0000',this.startTime)
      },
      dateChange_a(e) {
        this.endTime = e
        // console.log('0000',this.endTime)
      },
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
    }
  }
</script>

<style lang="scss">
  .conter {
    // height: 1452rpx;
    background: #F7F7F7;
    overflow: hidden;
  }

  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }
  .uni-datetime-picker-timebox[data-v-6e13d7e2] {
    border: none !important;
  }
  .header {
    width: 702rpx;
    height: 80rpx;
    margin: 25rpx auto;
    // background-color: #FFFFFF;
    border-radius: 8rpx;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .head {
    width: 47%;
    height: 80rpx;
    background-color: #FFFFFF;
    border-radius: 8rpx;
    overflow: hidden;
  }
  .head_word{
    margin-top: -10rpx;
  }
  
  .head_if {
    width: 100%;
    height: 80rpx;
    font-size: 24rpx;
    text-align: center;
    line-height: 80rpx;
    background-color: #FFFFFF;
    border-radius: 8rpx;
  }

  .header_a {
    width: 702rpx;
    height: 80rpx;
    margin: 20rpx auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
  }

  .box {
    width: 47%;
     height: 80rpx;
    background-color: #FFFFFF;
    border-radius: 8rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .box_a {
    width: 47%;
     height: 80rpx;
    background-color: #FFFFFF;
    border-radius: 8rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .head_left {
    margin-left: 20rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
  }

  .head_right {
    margin-right: 30rpx;

    image {
      width: 24rpx;
      height: 24rpx;
    }
  }
  .Line{
    width: 16rpx;
    height: 1rpx;
    background-color: #CCCCCC;
    }

  .btn {
    margin: 0 auto;
    width: 702rpx;
    height: 66rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 66rpx;
    text-align: center;
    background-color: #4EA1FF;
    border-radius: 4rpx;
  }

  .chart {
    width: 702rpx;
    // height: 690rpx;
    margin: 24rpx auto;
    background-color: #FFFFFF;
    border-radius: 8rpx;
    padding: 20rpx 0;
  }

  .chart_list {
    width: 640rpx;
    margin: 0 auto;
  }
</style>
